<template>
  <div style="min-height:600px;">
    <el-col :span="24">
      <el-steps :active="step_active" :align-center="true" :center="true" style="margin:10px 15px;">
        <el-step title="选中产品"></el-step>
        <el-step title="填写订单信息"></el-step>
        <el-step title="预定成功"></el-step>
        <el-step title="在线签约"></el-step>
        <el-step title="在线支付"></el-step>
        <el-step title="支付成功"></el-step>
      </el-steps>
    </el-col>
    <el-col :span="24">
      <div class="f18">填写订单信息</div>
      <div class="oh mt20">
        <div class="left_block">
          <div class="bt_bt">产品信息</div>
          <div class="white_bg f14">
            <div class="mt10">
              <span class="leftfont ofgray">产品名称</span>
              <span class="ml20 wd500">{{product.productMainTitle}}{{'('+product.productSubTitle+')'}}</span>
            </div>
            <div class="mt10">
              <span class="leftfont ofgray">出发城市</span>
              <span class="ml20">{{product.dpt}}</span>
            </div>
            <div class="mt10">
              <span class="leftfont ofgray">到达城市</span>
              <span class="ml20">{{product.arr}}</span>
            </div>
            <div class="mt10">
              <span class="leftfont ofgray">出发日期</span>
              <span class="ml20">{{stock.date}}</span>
            </div>
            <div class="mt10">
              <span class="leftfont ofgray">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
              <span class="ml20 oforange">￥
                <span class="f18">{{stock.adultSalePrice}}</span>元</span>
            </div>
          </div>
          <div class="bt_bt mt10">联系人信息</div>
          <div class="white_bg f14">
            <el-form :model="contacter" :rules="con_rules" ref="contacter" label-width="100px">
              <el-form-item label="联系人" prop="con_name">
                <el-input v-model="contacter.con_name" style="width:200px;" size="small"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="con_mobile">
                <el-input v-model="contacter.con_mobile" style="width:200px;" size="small"></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="con_mail">
                <el-input v-model="contacter.con_mail" style="width:200px;" size="small"></el-input>
              </el-form-item>
              <el-form-item label="默认联系人">
                <el-switch on-text="是" off-text="否" v-model="contacter.con_defaultUse"></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div class="bt_bt">出游人信息
            <span class="ofgray ml20 f12">请准确填写出游人信息（姓名、证件号码），以免无法正常出游</span>
          </div>
          <el-collapse v-model="activeNames2" @change="handleChange">
            <el-collapse-item title="常旅客" name="1">
              <el-button>张三</el-button>
              <el-button>李四</el-button>
              <el-button>王五</el-button>
              <el-button>赵六</el-button>
            </el-collapse-item>
          </el-collapse>
          <div class="white_bg f14">
            <template v-for="(item, index) in pass_list">
              <div style="height:50px;">
                <div class="mt10 ml0" >
                  <span class="mr5" style="line-height:40px;vertical-align:top">{{item['pass_lebel' + index]}}</span>
                  <el-input v-model="item['pass_name' + index]" @blur="passNameCheck(index)" style="width:100px;"  size="small" placeholder="请填写出游人姓名"></el-input>
                  <el-select v-model="item['pass_idType' + index]" size="small"  style="width:100px;">
                    <el-option
                      v-for="item in idOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                  <el-input v-model="item['pass_idNo' + index]" @blur="passIdNoCheck(index)" style="width:140px;" size="small" placeholder="证件号码"></el-input>
                  <el-select v-model="item['pass_sex' + index]" size="small"  style="width:100px;">
                    <el-option
                      v-for="item in sexOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                  <el-date-picker
                    v-model="item['pass_birthday' + index]"
                    type="date"
                    placeholder="生日" style="width: 120px;">
                  </el-date-picker>
                  <el-input v-model="item['pass_phone' + index]" @blur="passNameCheck(index)" style="width:100px;"  size="small" placeholder="手机号"></el-input>
                  <el-button class="ml10" size="small" @click="resetPassInfo(index)" style="width:40px;vertical-align:top;margin-top:6px">清空</el-button>
                </div>
                <div class="ml10">
                  <span class="red f12" style="margin-left:30px;">{{item['name_msg' + index]}}</span>
                  <span class="red f12" style="margin-right:448px;float:right">{{item['idNo_msg' + index]}}</span>
                </div>
              </div>
            </template>
            <div class="mt10">
              <span  class="mr10">默认常旅客</span>
              <el-switch on-text="是" off-text="否" v-model="pass_defaultUse"></el-switch>
            </div>
            <div class="mt10 mt20">
              <el-collapse v-model="activeNames">
                <el-collapse-item title="出游人预订限制" name="1">
                  <div class="t2 ofgray f13">由于服务能力限制，行程强度较大，为防止旅途中发生人身意外伤害事故的问题，出游人年龄超过80岁（含），不能预订，敬请谅解！</div>
                  <div class="t2 ofgray f13">由于服务能力限制，行程强度较大，为防止旅途中发生人身意外伤害事故的问题，出游人年龄小于2岁（不含），不能预订，敬请谅解！</div>
                  <div class="t2 ofgray f13">出游人年龄超过70岁，必须与我司签订《健康协议》！</div>
                  <div class="t2 ofgray f13">由于服务能力限制，本公司不接待18周岁以下旅游者单独报名出游，敬请谅解！未满18周岁的旅游者请由家属（因服务能力所限无法接待及限制接待的人除外）陪同参加！</div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div class="tc mt30">
              <el-checkbox v-model="checked">我已认真阅读并同意以下条款</el-checkbox>
            </div>
            <el-row type="flex" justify="center">
              <el-button type="primary" style="margin-top:15px;" @click="createOrder">提交订单</el-button>
            </el-row>
          </div>
          <div class="bt_bt mt10">合同信息</div>
        </div>
        <div class="right_block">
          <div class="scroll">
            <div class="bt_bt_r">费用信息</div>
            <div class="mt5 f14 ml20">成人</div>
            <div class="mt5 f14 ml20 mr20 border_b oh">
              <span class="oforange">{{stock.adultSalePrice}}元</span>&nbsp;&nbsp;
              <span>×{{aduNum}}</span>
              <span class="oforange fr">{{stock.adultSalePrice*aduNum}}元</span>
            </div>
            <div class="mt5 f14 ml20">儿童</div>
            <div class="mt5 f14 ml20 mr20 border_b oh">
              <span class="oforange">{{stock.childSalePrice}}元</span>&nbsp;&nbsp;
              <span>×{{chiNum}}</span>
              <span class="oforange fr">{{stock.childSalePrice*chiNum}}元</span>
            </div>
            <!--<div class="mt5 f14 ml20">国内游意外险</div>-->
            <!--<div class="mt5 f14 ml20 mr20 border_b oh">-->
              <!--<span class="oforange">2960元</span>&nbsp;&nbsp;-->
              <!--<span>×2</span>-->
              <!--<span class="oforange fr">5889元</span>-->
            <!--</div>-->
            <!--<div class="mt5 f14 ml20">国内游取消险</div>-->
            <!--<div class="mt5 f14 ml20 mr20 border_b oh">-->
              <!--<span class="oforange">2960元</span>&nbsp;&nbsp;-->
              <!--<span>×2</span>-->
              <!--<span class="oforange fr">5889元</span>-->
            <!--</div>-->
            <div class="mt5 f14 ml20">优惠</div>
            <div class="mt5 f14 ml20 mr20 border_b oh">
              <span class="oforange">-0元</span>&nbsp;&nbsp;
              <span></span>
              <span class="oforange fr">-0元</span>
            </div>
            <div class="gray_bg">
              <div class="mt5 f14 ml20">费用总额：
                <span class="oforange fr f18 fb">{{(stock.adultSalePrice*aduNum)+(stock.childSalePrice*chiNum)}}元</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </div>
</template>
<script type="text/ecmascript-6">
  import $ from 'jquery'
  export default {
    data () {
      return {
        step_active: 2, // 操作进度
        idOptions: [
          {value: 'NI', label: '身份证'},
          {value: 'PP', label: '护照'},
          {value: 'HKMP', label: '港澳通行证'},
          {value: 'TW', label: '台胞证'},
          {value: 'OFFIC', label: '军官证'},
          {value: 'SOLDI', label: '士兵证'},
          {value: 'ID', label: '其它'}
        ],
        sexOptions: [
          {value: 0, label: '女'},
          {value: 1, label: '男'}
        ],
        contacter: { // 联系人
          con_name: '', // 姓名
          con_idType: 'NI', // 证件类型
          con_idNo: '', // 证件号
          con_mobile: '', // 手机号
          con_mail: '', // 电子邮箱
          con_defaultUse: true
        },
        product: {
          id: 0, // ID
          companyId: 0, // 公司id
          productCode: '', // 产品编号
          productType: '', // 产品类型
          gType: '', // 参团类型
          lineType: '', // 线路类型
          productState: true, // 产品状态
          auditState: 0, // 审核状态
          productMainTitle: '', // 途游产品名称主标题
          productSubTitle: '', // 途游产品名称副标题
          supplyProductName: '', // 供应商产品名称
          productMainPic: '', // 产品主图
          productPic: '', // 产品图片
          dpt: '', // 出发地
          arr: '', // 目的地
          productFeatures: '', // 产品特色
          tripDay: 0, // 行程天数
          tripNight: 0, // 行程晚数
          advanceDays: 0, // 提前预定天数
          auditResult: '', // 审核结果
          createTime: '', // 创建时间
          minSalePrice: 0 // 最低成人销售价
        }, // 产品
        stock: {
          id: 0, // ID
          productId: 0, // 产品ID
          date: '', // 日期
          adultSalePrice: 0, // 成人销售价
          adultSettlementPrice: 0, // 成人结算价
          childSalePrice: 0, // 儿童销售价
          childSettlementPrice: 0, // 儿童结算价
          differSalePrice: 0, // 单房差销售价
          differSettlementPrice: 0, // 单房差结算价
          stock: 0, // 库存
          saleStock: 0, // 已售库存
          isOverbooking: false, // 是否超售
          createtime: '' // 创建时间
        }, // 库存
        activeNames2: 0,
        pass_list: [], // 常旅客列表
        pass_defaultUse: true, // 默认保存常旅客
        checked: false, // 是否同意条款
        activeNames: ['1'],
        aduNum: 0, // 成人数
        chiNum: 0, // 儿童数
        con_rules: {
          con_name: [
            {required: true, message: '请输入联系人姓名', trigger: 'blur'}
          ],
          con_idNo: [
            {required: true, message: '请输入证件号码', trigger: 'blur'}
          ],
          con_mobile: [
            {required: true, message: '请输入手机号码', trigger: 'blur'}
          ],
          con_mail: [
            {required: true, message: '请输入电子邮箱', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 清空常旅客信息
      resetPassInfo (index) {
        this.pass_list[index]['pass_name' + index] = ''
        this.pass_list[index]['pass_idType' + index] = 'NI'
        this.pass_list[index]['pass_idNo' + index] = ''
        this.pass_list[index]['name_msg' + index] = ''
        this.pass_list[index]['idNo_msg' + index] = ''
        this.pass_list[index]['pass_sex' + index] = 0
        this.pass_list[index]['pass_birthday' + index] = ''
        this.pass_list[index]['pass_phone' + index] = ''
      },
      // 常旅客姓名验证
      passNameCheck (index) {
        let passName = this.pass_list[index]['pass_name' + index]
        if (passName.replace(/^\s$/g, '') === '') {
          this.pass_list[index]['name_msg' + index] = '请输入出游人姓名'
          return false
        } else {
          this.pass_list[index]['name_msg' + index] = ''
          return true
        }
      },
      // 常旅客证件号验证
      passIdNoCheck (index) {
        let passIdNo = this.pass_list[index]['pass_idNo' + index]
        if (passIdNo.replace(/^\s$/g, '') === '') {
          this.pass_list[index]['idNo_msg' + index] = '请输入证件号码'
          return false
        } else {
          this.pass_list[index]['idNo_msg' + index] = ''
          return true
        }
      },
      getByid () {
        var params = {}
        params.productId = this.$route.params.productId
        params.ptStockId = this.$route.params.ptStockId
        this.$http.post('/tour/web/productTour/queryStockDetail.htm', params).then(response => {
          var resBody = response.body
          this.loadtype = false
          if (resBody.isSuccess === 0) {
            this.product = resBody.result.product
            this.stock = resBody.result.stock
          } else {
            this.product = resBody.result.product
            this.stock = resBody.result.stock
          }
        })
      },
      createOrder () {
        var params = {}
        let tName = ''
        let tType = ''
        let tcType = ''
        let tcNum = ''
        let sex = ''
        let birthday = ''
        let tPhone = ''
        for (let i = 0; i < this.pass_list.length; i++) {
          if (tName === '' && tType === '' && tcType === '' && tcNum === '' && sex === '' && birthday === '' && tPhone === '') {
            tName = this.pass_list[i]['pass_name' + i]
            tType = this.pass_list[i]['pass_idType' + i]
            tcNum = this.pass_list[i]['pass_idNo' + i]
            sex = this.pass_list[i]['pass_sex' + i]
            birthday = this.pass_list[i]['pass_birthday' + i]
            tPhone = this.pass_list[i]['pass_phone' + i]
          } else {
            tName += '|' + this.pass_list[i]['pass_name' + i]
            tType += '|' + this.pass_list[i]['pass_idType' + i]
            tcNum += '|' + this.pass_list[i]['pass_idNo' + i]
            sex += '|' + this.pass_list[i]['pass_sex' + i]
            birthday += '|' + this.pass_list[i]['pass_birthday' + i]
            tPhone += '|' + this.pass_list[i]['pass_phone' + i]
          }
        }
        params.productId = this.$route.params.productId
        params.ptStockId = this.$route.params.ptStockId
        params.aduNum = this.$route.params.aduNum
        params.chiNum = this.$route.params.chiNum
        params.bInfo = this.pass_list
        params.tName = tName
        params.tType = tType
        params.tcNum = tcNum
        params.tcType = 'adu'
        params.sex = sex
        params.type = '2'
        params.birthday = birthday
        params.tPhone = tPhone
        params.contacter = this.contacter
        this.$http.post('/tour/web/productTour/creatOrder.htm', params).then(response => {
          var resBody = response.body
          this.loadtype = false
          if (resBody.isSuccess === 0) {
          }
        })
      }
    },
    mounted () {
      // 费用信息滚动效果
      $(document).ready(function () {
        var divh = $('.scroll').offset().top
        $(window).scroll(function () {
          var wsh = $(window).scrollTop()
          if (wsh >= divh) {
            $('.scroll').css({ 'position': 'fixed', 'top': '110px' })
          } else {
            $('.scroll').css({ 'position': 'relative', 'top': '0px' })
          }
        })
      })
      this.aduNum = this.$route.params.aduNum
      this.chiNum = this.$route.params.chiNum
      // 初始化
      for (let i = 0; i < (this.aduNum * 1 + this.chiNum * 1); i++) {
        let obj = {}
        obj['pass_lebel' + i] = '游客' + (i + 1) // 常旅客类型
        obj['pass_name' + i] = '' // 常旅客姓名
        obj['pass_idType' + i] = 'NI' // 常旅客证件类型
        obj['pass_idNo' + i] = '' // 常旅客证件号
        obj['name_msg' + i] = '' // 常旅客姓名提示信息
        obj['idNo_msg' + i] = '' // 常旅客证件号提示信息
        obj['pass_sex' + i] = 0 // 性别信息
        obj['pass_birthday' + i] = '' // 生日信息
        obj['pass_phone' + i] = '' // 生日信息
        this.pass_list.push(obj)
      }
      this.getByid()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .f12 {
    font-size: 12px;
  }
  .f13 {
    font-size: 13px;
  }
  .f14 {
    font-size: 14px;
  }
  .f18 {
    font-size: 18px;
  }
  .mt5 {
    margin-top: 5px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt30 {
    margin-top: 30px;
  }
  .ml10 {
    margin-left: 10px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .ml60 {
    margin-left: 60px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .oh {
    overflow: hidden;
  }
  .fr {
    float: right;
    display: inline;
  }
  .fb {
    font-weight: bold;
  }
  .left_block {
      width: 800px;
      float: left;
      background-color: #fff;
      border: 1px solid #f0f0f0;
  }
  .bt_bt {
      line-height: 30px;
      border-top: 2px solid #20A0FF;
      background-color: #f7f7f7;
      font-size: 14px;
      font-weight: bold;
      padding: 0px 10px;
  }
  .white_bg {
    background-color: #fff;
    padding: 10px 10px;
  }
  .leftfont {
      width: 80px;
      display: inline-block;
      text-align: right;
  }
  .ofgray {
      color: #767676;
  }
  .wd500 {
    width: 560px;
    display: inline-block;
    vertical-align: top;
  }

  .right_block {
    width: 370px;
    float: right;
    background-color: #EFF9FF;
  }
  .scroll {
    width: 370px;
    background-color: #EFF9FF;
  }
  .bt_bt_r {
    line-height: 30px;
    border-top: 2px solid #20A0FF;
    background-color: #f7f7f7;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 10px;
  }
  .border_b {
    border-bottom: 1px solid #f7f7f7;
    line-height: 26px;
  }
  .oforange {
    color: #FF7F0E;
  }
  .gray_bg {
    background-color: #f0f0f0;
    padding: 10px 10px;
  }
  .red {
    color: #ff0000;
  }
  .t2 {
    text-indent: 2em;
  }
  .tc {
      text-align: center;
  }
  .el-step__head .is-success{color:#fff}


</style>
